//交易策略建议
<template>
  <a-layout>
    <a-layout-content>
      <div class="asset-container">
        <!-- <h2>碳配额价格波动（曲线图）</h2> -->
        <div id="chart-carbon-quota" class="chart" />
        <div class="price-thresholds">
          <span>买入价格阀值：</span>
          <a-input-number v-model="carbonQuota.buyThreshold" style="margin-right: 20px" />
          <span>卖出价格阀值：</span>
          <a-input-number v-model="carbonQuota.sellThreshold" />
        </div>
      </div>

      <div class="asset-container">
        <!-- <h2>碳信用价格波动（曲线图）</h2> -->
        <div id="chart-carbon-credit" class="chart" />
        <div class="price-thresholds">
          <span>买入价格阀值：</span>
          <a-input-number
            v-model="carbonCredit.buyThreshold"
            style="margin-right: 20px"
          />
          <span>卖出价格阀值：</span>
          <a-input-number v-model="carbonCredit.sellThreshold" />
        </div>
      </div>

      <div class="asset-container">
        <div id="chart-green-electricity" class="chart" />
        <div class="price-thresholds">
          <span>买入价格阀值：</span>
          <a-input-number
            v-model="greenElectricity.buyThreshold"
            style="margin-right: 20px"
          />
          <span>卖出价格阀值：</span>
          <a-input-number v-model="greenElectricity.sellThreshold" />
        </div>
      </div>

      <div class="asset-container">
        <div id="chart-green-carbon" class="chart" />
        <div class="price-thresholds">
          <span>买入价格阀值：</span>
          <a-input-number v-model="greenCarbon.buyThreshold" style="margin-right: 20px" />
          <span>卖出价格阀值：</span>
          <a-input-number v-model="greenCarbon.sellThreshold" />
        </div>
      </div>

      <div class="asset-container">
        <div id="chart-carbon-sink" class="chart" />
        <div class="price-thresholds">
          <span>买入价格阀值：</span>
          <a-input-number v-model="carbonSink.buyThreshold" style="margin-right: 20px" />
          <span>卖出价格阀值：</span>
          <a-input-number v-model="carbonSink.sellThreshold" />
        </div>
      </div>

      <div class="asset-container">
        <div id="chart-carbon-derivative" class="chart" />
        <div class="price-thresholds">
          <span>买入价格阀值：</span>
          <a-input-number
            v-model="carbonDerivative.buyThreshold"
            style="margin-right: 20px"
          />
          <span>卖出价格阀值：</span>
          <a-input-number v-model="carbonDerivative.sellThreshold" />
        </div>
      </div>

      <div class="carbon-completion">
        企业当年完成碳排抵消的：
        <a-input-number v-model="carbonOffsetPercent" style="margin-left: 10px" />
        <span>%</span>
      </div>

      <div style="text-align: center; margin-top: 30px">
        <a-button type="primary" size="large" @click="calculateStrategy"
          >策略计算</a-button
        >
      </div>

      <div class="suggestions" v-if="suggestions.length > 0">
        <h2 style="margin-top: 30px">建议结果：</h2>
        <ul>
          <li v-for="(suggestion, index) in suggestions" :key="index">
            - {{ suggestion.asset }}：{{ suggestion.action }}，建议数量：{{
              suggestion.quantity
            }}
          </li>
        </ul>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

const carbonQuota = ref({ buyThreshold: 0, sellThreshold: 0 });
const carbonCredit = ref({ buyThreshold: 0, sellThreshold: 0 });
const greenElectricity = ref({ buyThreshold: 0, sellThreshold: 0 });
const greenCarbon = ref({ buyThreshold: 0, sellThreshold: 0 });
const carbonSink = ref({ buyThreshold: 0, sellThreshold: 0 });
const carbonDerivative = ref({ buyThreshold: 0, sellThreshold: 0 });
const carbonOffsetPercent = ref(0);
const suggestions = ref([]);

// 模拟数据
const generatePriceData = () => {
  return Array.from({ length: 12 }, () => Math.floor(Math.random() * 100 + 1));
};

const initCharts = () => {
  const charts = [
    { id: "chart-carbon-quota", name: "碳配额" },
    { id: "chart-carbon-credit", name: "碳信用" },
    { id: "chart-green-electricity", name: "绿电" },
    { id: "chart-green-carbon", name: "绿碳" },
    { id: "chart-carbon-sink", name: "碳汇项目" },
    { id: "chart-carbon-derivative", name: "碳金融衍生品" },
  ];

  charts.forEach((chart) => {
    const chartDom = document.getElementById(chart.id);
    const myChart = echarts.init(chartDom);

    const option = {
      title: {
        text: chart.name + "历史价格波动",
      },
      tooltip: {},
      xAxis: {
        type: "category",
        data: Array.from({ length: 12 }, (_, i) => `月份${i + 1}`),
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          name: chart.name,
          type: "line",
          data: generatePriceData(),
        },
      ],
    };

    myChart.setOption(option);
  });
};

const calculateStrategy = () => {
  suggestions.value = [];

  const assets = [
    {
      name: "碳配额",
      buyThreshold: carbonQuota.value.buyThreshold,
      sellThreshold: carbonQuota.value.sellThreshold,
    },
    {
      name: "碳信用",
      buyThreshold: carbonCredit.value.buyThreshold,
      sellThreshold: carbonCredit.value.sellThreshold,
    },
    {
      name: "绿电",
      buyThreshold: greenElectricity.value.buyThreshold,
      sellThreshold: greenElectricity.value.sellThreshold,
    },
    {
      name: "绿碳",
      buyThreshold: greenCarbon.value.buyThreshold,
      sellThreshold: greenCarbon.value.sellThreshold,
    },
    {
      name: "碳汇项目",
      buyThreshold: carbonSink.value.buyThreshold,
      sellThreshold: carbonSink.value.sellThreshold,
    },
    {
      name: "碳金融衍生品",
      buyThreshold: carbonDerivative.value.buyThreshold,
      sellThreshold: carbonDerivative.value.sellThreshold,
    },
  ];

  assets.forEach((asset) => {
    const { name, buyThreshold, sellThreshold } = asset;

    if (buyThreshold > 0) {
      suggestions.value.push({ asset: name, action: "买入", quantity: buyThreshold });
    }
    if (sellThreshold > 0) {
      suggestions.value.push({ asset: name, action: "卖出", quantity: sellThreshold });
    }
  });
};

onMounted(() => {
  initCharts();
});
</script>

<style scoped>
.asset-container {
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  background-color: white;
}

.chart {
  height: 300px;
}

.price-thresholds {
  margin-top: 15px;
}

.carbon-completion {
  margin: 20px 0;
  text-align: center;
}

.suggestions {
  margin-top: 30px;
}
</style>
